<template>
  <div class="tabs-wrapper">
    <n-tabs type="segment" animated>
      <n-tab-pane style="height: 100%" name="style" tab="样式">
        <div style="height: calc(100% - 106px)">
          <SettingItem name="地图风格">
            <div style="display: flex">
              <n-select
                v-model:value="mapStyle"
                size="small"
                :options="mapStyleOptions"
                @update:value="handleStyleSelect"
              ></n-select>
            </div>
          </SettingItem>
          <SettingItem name="初始位置">
            <n-select
              size="small"
              :options="initPositionOption"
              v-model:value="properties.initPositionType"
            ></n-select>
          </SettingItem>
          <SettingItem name="初始位置">
            <n-select
              size="small"
              :options="initPositionOption"
              v-model:value="properties.initPositionType"
            ></n-select>
          </SettingItem>

          <SettingItem
            v-if="properties.initPositionType == 'custom'"
            name="中心点位"
          >
            <div class="flex">
              <n-input
                pair
                separator="-"
                :placeholder="['经度', '纬度']"
                clearable
                size="small"
                v-model:value="properties.center"
              />
              <!-- <n-button text style="font-size: 24px; margin-left: 6px">
                <n-icon>
                  <LocationOutline />
                </n-icon>
              </n-button> -->
            </div>
            <!-- <n-input size="small" placeholder="请输入点位名称"></n-input> -->
          </SettingItem>
          <SettingItem
            v-if="properties.initPositionType == 'custom'"
            name="初始缩放"
          >
            <n-input-number
              size="small"
              v-model:value="properties.zoom"
              :min="1"
              :max="20"
            />
          </SettingItem>
          <SettingItem name="是否聚合">
            <div style="display: flex">
              <n-switch
                size="large"
                :round="false"
                v-model:value="isCluster"
              ></n-switch>
            </div>
          </SettingItem>
          <SettingItem name="展示字段">
            <n-select size="small"></n-select>
          </SettingItem>
          <SettingCollapse name="点样式">
            <SettingItem name="点类型">
              <n-select
                size="small"
                v-model:value="properties.dotType"
                :options="dotTypeOptions"
              ></n-select>
            </SettingItem>
            <div v-if="properties.dotType == 'circle'">
              <SettingItem :show-alpha="false" name="内圈颜色">
                <n-color-picker
                  v-if="
                    !checkType(properties.dotPaint['circle-color'], 'object')
                  "
                  :show-alpha="false"
                  v-model:value="properties.dotPaint['circle-color']"
                ></n-color-picker>
                <n-input
                  v-else
                  disabled
                  :value="properties.dotPaint['circle-color']"
                  size="small"
                ></n-input>
                <n-button
                  class="expression-button"
                  size="small"
                  circle
                  quaternary
                  type="primary"
                  @click="
                    openExpressionDialog(
                      'dotPaint',
                      'circle-color',
                      properties.dotPaint['circle-color']
                    )
                  "
                >
                  <template #icon>
                    <n-icon><CodeSlashOutline /></n-icon>
                  </template>
                </n-button>
              </SettingItem>
              <SettingItem :show-alpha="false" name="内圈透明">
                <n-slider
                  size="small"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  v-model:value="properties.dotPaint['circle-opacity']"
                ></n-slider>
              </SettingItem>
              <SettingItem name="内圈宽度">
                <n-input-number
                  :min="1"
                  v-model:value="properties.dotPaint['circle-radius']"
                  size="small"
                ></n-input-number>
              </SettingItem>
              <SettingItem name="外圈颜色">
                <n-color-picker
                  :show-alpha="false"
                  v-model:value="properties.dotPaint['circle-stroke-color']"
                ></n-color-picker>
              </SettingItem>
              <SettingItem :show-alpha="false" name="外圈透明">
                <n-slider
                  size="small"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  v-model:value="properties.dotPaint['circle-stroke-opacity']"
                ></n-slider>
              </SettingItem>
              <SettingItem name="外圈宽度">
                <n-input-number
                  :min="1"
                  v-model:value="properties.dotPaint['circle-stroke-width']"
                  size="small"
                ></n-input-number>
              </SettingItem>
              <SettingItem name="虚化">
                <n-input-number
                  :min="0"
                  :max="1"
                  :step="0.1"
                  v-model:value="properties.dotPaint['circle-blur']"
                  size="small"
                ></n-input-number>
              </SettingItem>
            </div>
          </SettingCollapse>
        </div>
        <div class="config-box-bottom">
          <n-space vertical>
            <n-button @click="handleSave" style="width: 100%" type="primary"
              >保存</n-button
            >
            <n-button style="width: 100%" type="error">删除</n-button>
          </n-space>
        </div>
      </n-tab-pane>
      <n-tab-pane style="height: 100%" name="point" tab="点位">
        我这辈子最疯狂的事，发生在我在 Amazon
        当软件工程师的时候，故事是这样的：<br /><br />
        那时我和女朋友住在一起，正在家里远程工作。忽然同事给我发来了紧急消息：”我们的服务出现了
        SEV 2 级别的故障！需要所有的人马上协助！“我们组的应用全挂掉了。<br /><br />
        当我还在费力的寻找修复方法的时候，忽然闻到隔壁房间的的焦味，防火报警器开始鸣叫。
      </n-tab-pane>
    </n-tabs>
    <dialogForm
      ref="expressionRef"
      :schema="expressionSchema"
      @submit="handleExpressionSubmit"
    ></dialogForm>
  </div>
</template>

<script lang="ts" setup>
import { PropType, onMounted } from "vue";
import SettingItem from "@/pages/editor/components/config-panel/components/item.vue";
import SettingCollapse from "@/pages/editor/components/config-panel/components/collapse.vue";
import fileInfo from "../file-info.vue";
import { useMapStore } from "@/store/map";
import { computed, watch, ref } from "vue";
import { useEventBus } from "@vueuse/core";
import { LinkOutline, CodeSlashOutline } from "@vicons/ionicons5";
import expressionSchema from "@/pages/home/components/form/expression.json";
import dialogForm from "@/components/form-builder/dialog.vue";
const properties = ref<any>({
  dotType: "circle",
  dotPaint: {},
});
const mapStore = useMapStore();
const dataset = computed(() => {
  return mapStore.datasetInfo;
});
const mapBus = useEventBus("map");
const geojsonBus = useEventBus("geojson");
const configBus = useEventBus("config");
const mapStyle = ref("mapbox://styles/mapbox/dark-v11");
const isCluster = ref(false);
const dotColor = ref("#2c9678");
const hoverLabelOptions = ref([]);
const expressionRef = ref();
const dotTypeOptions = ref([
  {
    label: "圆点",
    value: "circle",
  },
  {
    label: "图片",
    value: "symbol",
  },
  {
    label: "着色器",
    value: "shader",
  },
]);
const initPositionOption = [
  {
    label: "点位重心分析",
    value: "mannal",
  },
  {
    label: "手动选择",
    value: "custom",
  },
];
const eventMap = {
  properties(e) {
    if (!e.value) {
      return;
    }
    properties.value = e.value;
    if (!properties.value.dotPaint) {
      properties.value.dotPaint = {
        "circle-color": "#2c9678",
        "circle-stroke-color": "#ddd",
        "circle-radius": 5,
        "circle-stroke-width": 2,
        "circle-blur": 0,
        "circle-stroke-opacity": 1,
        "circle-opacity": 1,
      };
    }
    if (!properties.value.dotType) {
      properties.value.dotType = "circle";
    }
    console.log("properties", properties.value);
  },
};
configBus.on((e: any) => {
  if (eventMap[e.type]) {
    eventMap[e.type](e);
  }
});
watch(
  () => properties.value,
  () => {
    mapBus.emit({ type: "repaint", value: properties.value, id: "main" });
  },
  {
    deep: true,
  }
);
watch(
  () => isCluster.value,
  (val) => {
    mapBus.emit({ type: "cluster", value: "main", visible: val });
    mapBus.emit({ type: "repaint", value: properties.value, id: "main" });
  }
);
const mapStyleOptions = [
  {
    label: "亮色",
    value: "mapbox://styles/mapbox/streets-v12",
  },
  {
    label: "黑暗",
    value: "mapbox://styles/mapbox/dark-v11",
  },
  {
    label: "卫星",
    value: "mapbox://styles/mapbox/satellite-streets-v11",
  },
];
const handleStyleSelect = (value: string) => {
  mapBus.emit({ type: "style", value });
};
const props = defineProps({
  value: Object as PropType<any>,
});
const checkType = (val: any, type: string) => {
  return typeof val == type;
};
onMounted(() => {
  console.log(props.value);
});
const handleSave = () => {
  geojsonBus.emit({
    type: "save",
    properties: properties.value,
  });
};
const openExpressionDialog = (from: string, name: string, value: any) => {
  console.log(value);
  const data = typeof value != "object" ? "[]" : JSON.stringify(value);
  expressionRef.value.open({
    from,
    name,
    data,
  });
};
const handleExpressionSubmit = (data: any) => {
  console.log(data);
  try {
    properties.value[data.from][data.name] = JSON.parse(data.data);
  } catch {
    properties.value[data.from][data.name] = data.data;
  }
};
</script>

<style lang="scss" scoped>
.tabs-wrapper {
  padding: 12px;
  height: 100%;
  box-sizing: border-box;
}
.expression-button {
  margin-left: 8px;
}
:deep() {
  .n-tabs {
    height: 100%;
  }
  .n-tabs-pane-wrapper {
    height: 100%;
  }
  .n-tabs.n-tabs--top .n-tab-pane {
    box-sizing: border-box;
  }
}
</style>
